<template>
	<div class="tmpl">
		<nav-bar title='新闻列表' />

		<div class="demo">
			<ul>
				<li v-for="(news,index) in newsList" :key="news.id">
					<!-- query:{id:news.id}为携带到详情页的新闻id,url为http://xxx.com/#/news/detail?id=1 -->
					<router-link :to="{name:'news.detail',query:{id:index} }">
						<img class="" :src="news.image"/>
						<div >
							<span>{{news.title}}</span>
							<div class="news-desc">
								<p>点击数：22</p>
								<p>发表时间：{{news.passtime | convertTime('YYYY-MM-DD')}}</p>
							</div>
						</div>
					</router-link>
				</li>
				<li class="line"></li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				// 新闻列表
				newsList:[],
			}
		},
		// created适合操作数据
		created() {
			this.$axios.get('https://api.apiopen.top/getWangYiNews')
			.then( res=>{
					this.newsList = res.data.result;
			})
			.catch( err=>console.log('新闻列表异常',err));
		}
	}
</script>
<style scoped>
   /*解决li板块右偏问题*/
	li {
		margin: 0 -20px;
	}
	.news-desc {
		margin: -14px;
	}
	.demo a {
		display: block;
		width: 380px;
		height: 44px;
		color: #000;
		padding: 0px 0px;
	}
	.demo li:not(:first-child) a {
		margin-top: 40px;
	}
	.demo img {
		float: left;
		width: 60px;
		height: 60px;
		margin-right: 10px;
	}
	.demo a div {
		float: left;
		width: 290px;
		margin-right: 20px;
	}
	.demo span {
		display: block;
		width: 95%;
		font-size: 16px;
		line-height: 20px;
	}
	.demo a p {
		float: left;
		color: #0bb0f5;
		font-size: 14px;
		line-height: 21px;
	}
	/*点击数*/
	.demo p:nth-child(1) {
		margin-left: 20px;
	}
	/*发表时间*/
	.demo p:nth-child(2) {
		float: right;
		margin-right: 10px;
	}
	.line {
		margin-left: 16px;
		transform: scaleY(.5);
		border-bottom: 1px solid #c8c7cc;
	}
</style>